<template>

  <!-- <el-dialog title="文件修改" class="update_dialog" :visible.sync="dialog">

  </el-dialog> -->

  <el-drawer title="文件修改" :visible.sync="dialog" direction="rtl">
    <el-form :model="fileDetails" status-icon :rules="rules" ref="fileDetails" label-width="100px"
      class="demo-ruleForm">
      <!-- 下拉框 -->
      <el-form-item label="文件夹：">
        <!-- <el-select v-model="fileDetails.folderId" placeholder="请选择文件夹">
          <div v-for="(item, index) in folders" :key="index">
            <el-option :label="item.folderName" :value="item.id"></el-option>
          </div>
        </el-select> -->
        <el-cascader ref="cascaderData" class="select" :show-all-levels="true" v-model="folderId" :options="folders"
          :props="{checkStrictly: true }"></el-cascader>
      </el-form-item>

      <!-- 文件名 -->
      <el-form-item label="文件名：" prop="fileName" style="width: 350px;">
        <el-input type="text" v-model="fileDetails.fileName" autocomplete="off"></el-input>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="update()">提交</el-button>
        <el-button @click="cencel()">取消</el-button>
      </el-form-item>

    </el-form>
  </el-drawer>
</template>

<script>
  import link from '@/api/Link'
  import apiUrl from '@/api/url'
  export default {
    name: "UpdateFile",
    props: ['updateOpen', 'updateData'],
    data () {
      var validateFileName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('文件名不能为空'));
        } else {
          callback();
        }
      };
      return {
        folderId: [],
        fileDetails: {},
        dialog: false,
        folders: [],
        rules: {
          fileName: [
            { validator: validateFileName, trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      //初始化
      init () {
        let user = JSON.parse(localStorage.getItem('user'))

        let data = {
          state: 0,
          id: user.rootId
        }
        //下拉框--获取数据
        link(apiUrl.baseUrl + '/sys/folder/findList/v2', 'POST', JSON.stringify(data), null).then((ok) => {
          this.folders.push(this.cascaderInit(ok.data.data))
        })
        let rootId = user.rootId
        this.folderId.push(rootId)
      },
      //构建下拉框数据
      cascaderInit (data) {
        if (!data) {
          return
        }
        let folders = {
          value: data.folder.id,
          label: data.folder.folderName,
          children: []
        }

        data.childFolders.forEach(element => {
          folders.children.push(this.cascaderInit(element))
        });

        return folders;
      },

      //提交修改
      update () {
        let data = {
          id: this.fileDetails.id,
          folderId: this.folderId[this.folderId.length - 1],
          fileName: this.fileDetails.fileName + this.fileDetails.suffix,
        }
        if (this.fileDetails.fileName === null || this.fileDetails.fileName == '') {
          this.$message.error('文件名不能为空')
          return
        }
        link(apiUrl.baseUrl + '/sys/file/update/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code === 0) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.$parent.init()
          } else {
            this.$message({
              message: ok.data.msg,
              type: "error",
            });
          }
        })
      },
      //取消
      cencel () {
        this.dialog = false
      }
    },
    watch: {
      updateOpen (curVal, oldVal) {
        this.dialog = true
        let file = this.updateData
        let name = file.fileName
        file.fileName = name.substring(0, name.lastIndexOf("."))
        this.fileDetails = file
      },
    },
    mounted () {
      this.init()
    },
  };
</script>

<style>

</style>